<template>
  <div id="myChart" style="width: 800px;height: 800px;">

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: "T",

    components:{

    },
    created() {
      this.option.series[0].data[0].value = this.datas
    },
    mounted() {
      var myChartDdom = document.getElementById('myChart');
      var myChart = echarts.init(myChartDdom);
      this.option && myChart.setOption(this.option);
    },
    data(){
      return{
        ii:-1,
        datas:[ 12320 , 24320, 7320, 28000, 32000, 15000], // [{name:"a",value:12320},{name:"b",value:12320},{name:"c",value:12320},]
        option : {
          color: ["#E3E68D"],// 围起来的边框颜色
          title: {
            text: '雷达图名称'
          },
          legend: {
            data: ['A']
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: 'A', max: 22322 ,color: 'red'},
              { name: 'b', max: 44326,color: '#000'},
              { name: 'c', max: 9328 ,color: '#000'},
              { name: 'd', max: 38000 ,color: '#000'},
              { name: 'f', max: 52000 ,color: '#000'},
              { name: 'g', max: 25000 ,color: '#000'}
            ],
          /*  axisName:{
              formatter: function (value, indicator) {
                console.log(value, indicator)
                return `<div>${indicator.name}</div>`
              }
            },*/
        /*    axisName:{
              rich: {
                a: {
                  fontSize: '14',
                  color: '#fff',
                  align: 'left',
                  lineHeight: '20'
                },
                b: {
                  fontSize: '14',
                  color: '#188BD9',
                  align: 'left',
                  fontWeight: 'bold'
                }
              },
              formatter: (a, b) => {
                this.ii++;
                // return `{a|${a}}\n{b|${datavalue[ii]}家}`;
                return `{a|${a}}    {b|${this.datas[this.ii]}}`;
              }

            },*/
            axisLine: {
              lineStyle: {
                color: 'rgba(153, 209, 246, 0.2)' // 分割线颜色
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: 'rgba(255,0,0,0)' // 整个雷达图图表背景的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: "orange" // 设置网格的颜色
              }
            },
          },
        /*  name: {
            rich: {
              a: {
                color: 'rgba(255, 255, 255, 0.88)',
                lineHeight: 20
              },
              b: {
                color: '#fff',
                align: 'center',
                backgroundColor: '#666',
                padding: 2,
                borderRadius: 4
              }
            },

            formatter: (a,b) => {
              i++;
              return `{a|${a}}\n{b|${arr1[i]}%}`
            }
          },*/
          series: [
            {
              name: 'Budget vs spending',
              type: 'radar',
              data: [
                {
                  value: [],
                  name: 'A',
                  label: {
                    normal: {
                      show: true,
                      formatter: function (params) {
                        return params.value ;
                      }
                    }
                  },
                  areaStyle: { // 区域颜色
                    color: 'orange'
                  },
                },
               /* {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: 'Actual Spending'
                }*/
              ]
            }
          ]
        }
      }
    },

    methods:{

    },
    watch:{

    },
    beforeDestroy() {

    }

  }
</script>

<style scoped lang="scss">

</style>
